<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>生日快乐</title>
    <style>
        #c_box1 {
            border: 3px solid black;
            font-size: 20px;
            color: black;
            width: 340px;
            margin: 100px auto 0;
            text-align: center;
            border-radius: 10px;
            background: #f6d0c9;
        }
        
        #c_box1 span {
            color: black;
            width: 40px;
            height: 50px;
            display: inline-block;
            line-height: 50px;
        }

    </style>
</head>

<body>
    <div id="c_box1"></div>
</body>
<script>
    //设置未来日期
    var b = document.getElementById('c_box1');

    function clock(n, id) {
        var box = document.getElementById(id);
        var date_future = new Date(n);
        var timer = setInterval(fn, 1000);
        fn();

        function fn() {
            //获取当前时刻
            var date_now = new Date();
            //计算时间差且换算为秒数
            var times = parseInt((date_future - date_now) / 1000);
            //天
            var day = parseInt(times / (24 * 3600));
            //获取不够一天的时间
            var s_times = times % (24 * 3600);
            //小时
            var h = parseInt(s_times / 3600);
            //获取不够一小时的时间
            var s_times1 = s_times % 3600;
            //分钟
            var min = parseInt(s_times1 / 60);
            //获取秒数
            var sec = s_times1 % 60;

            //判断是否结束
            if (times <= 0) {
                clearInterval(timer);
                day = h = min = sec = '0';

            }

            //显示时间 
            //innerHTML:html元素内容
            box.innerHTML = '<span>' + day + '</span>天<span>' + h + '</span>小时<span>' + min + '</span>分<span>' + sec + '</span>秒';
            if (times <= 0) {
                box.innerHTML = '祝：生日快乐！！！';
            }
        }


    }
    clock('2018/09/18 00:00:00', 'c_box1');

</script>

</html>
